.HMusic-base{
    -moz-user-select:none;
    z-index: 999;
    margin: 0; padding: 0; border-radius: 5px;
    background-color: @background-color;
    position: fixed; left: 0;  bottom: 40px!important;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    color: #FFF; font-size: 14px;
    font: small 'Microsoft Yahei';
    font-family: "Trebuchet MS", "Microsoft YaHei", Arial, Verdana, Tahoma, sans-serif;
    left: -365px;
    /* less */
    .transition(0.5s);
    
    /* 同级 */
    &.active{ left: 0px; }

    /* Public */
    ul{ margin: 0; padding: 0; list-style: none; }

    /* 主面板 */
    &>.an-panel{
        width: 365px; height: 180px;
        position: relative;
        overflow: hidden;
        text-shadow: none;

        /* 参数块 */
        .parameter{ margin: 15px 10px 0px 10px; font-size: 12px; color:#FFF; }

        /* 音乐详细属性 */
        .parameter-other{
            display: block; height: 15px; margin: 0 0 15px 0;

            i{ margin-right: 5px; }
            .fa{ font-size: 15px; } /* 图标 */
            
            &>.left { float: left; width: 130px; text-align: left; overflow: hidden; }

            &>.right{ float: right; width: 130px; text-align: right; overflow: hidden; }
        }

        /* 圆形图片 */
        .cover{
            z-index: 100;
            position: absolute;
            border-radius: 50%;
            border: 5px solid #FFF;
            width: 120px; height: 120px; left: 50%;
            margin-left: -55px; margin-top: -86px; box-shadow: 0 0 20px rgba(0,0,0,0.3);
            /* less */
            .transition(0.5s);
            &:after{ content: 'Hmusic'; position: absolute; opacity: 0.3; width: 100%; left: 0; text-align: center; top: 45px; }
            &.changing img{
                -webkit-transform: scale(0.3);
                -moz-transform: scale(0.3);
                -ms-transform: scale(0.3);
                transform: scale(0.3);
                opacity: 0;
            }

            img{ 
                width: 100%; height: 100%; opacity: 0.9; background-color: #FFF; z-index: 5;
                border-radius: 50%; display: inline-block; 
                /* less */
                .transition(0.5s);
            }

            &:hover img{ opacity: 1; }
        }

        /* 控制按钮 */
        .control{
            height: 35px; width: 100%; padding: 0 10px; bottom: 30px; position: absolute; color: #FFF; font-size: 1.8em; text-shadow: none;

            i,.control-status{ cursor: pointer; }
            &>i:hover{ color: @theme-color; }
            &>i{ width: 35px; height: 35px; line-height: 35px; text-align: center; .transition(0.3s); display: inline-block; }

            .control-loop,.control-next{ margin-right: 25px; }
            .control-next{ margin-left: 160px; margin-right: 20px; }
            .control-heart.active{ color: @color-red; }
            .control-heart:hover{ color: @color-red; }
            .control-status{ /* 播放按钮 */
                width: 40px; height: 40px; line-height: 40px; top: -55px; left: 167px; position: absolute; display: inline-block; background-color: rgba(77,77,77,0.8); z-index: 200; border: 2px solid #FFF; border-radius: 50%; opacity: 0.2; .transition(0.4s); overflow: hidden; 
                &>i{ top: 0; width: 22px; padding-left: 9px; height: 26px; display: inline-block; text-align: center; position: relative; .transition(0.4s); }
                &>i.active{ top:-40px; .transition(0.4s); }
            }
            .control-status:hover{ opacity: 0.8!important; }
            .control-status:hover i{ color: @theme-color; }
        }

        /* 进度条 */
        .progress-bar{ 
            height: 3px; width: 100%; position: absolute; bottom: 25px; cursor: pointer;

            /* 背景 */
            .bar{ width: 100%; height: 3px; background-color: #B2B2B2; position: relative; cursor: pointer; }
            /* 进度 */
            .active{ width: 0; height: 3px; position: absolute; background-color:#51B9C2; }
        }

        /* 底部 */
        .bottom{
            z-index: 2; bottom: 0px; width: 100%; height: 25px; line-height: 25px; position: absolute; background-color: #FFF; text-shadow: none;
            
            /* 底部左侧 */
            .bottom-left{ width: 50%; height: 25px; line-height: 25px; display: inline-block; z-index: 3; position: relative; }
            
            /* 底部右侧 */
            .bottom-right{ width: 50%; height: 25px; line-height: 25px; float: right; .transition(0.2s); display: inline-block; }

            /* 音量喇叭 */
            .btn-trumpet{ left: 5px; color: #C7C7C7; position: relative; font-size: 14px; display: inline-block; cursor: pointer; }
            
            /* 音量条 */
            .volume-bar{ 
                height: 3px; width: 145px; top: 12px; left: 25px; position: absolute; background-color: #b0aeb2; display: inline-block; cursor: pointer;
                /* 选中色 */
                .progress-bg{ width: 60px; height: 3px; background-color: #81c300; }
                /* 圆形按钮 */
                .drag{ top: -5px; left: 10px; width: 14px; height: 14px; float: right; position: relative; background-color: #FFF; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); border-radius: 50%; cursor: pointer; }
                .drag:hover,.drag.active{ background-color: #DDD; } /* 鼠标浮动 | 按下 */
            }

            /* 列表按钮 */
            .btn-list{
                color: #38343e; margin-right: 10px; font-size: 13px; float: right; display: inline-block;
                .transition(0.2s);

                &>i{ cursor: pointer; } /* 按钮 */
                &>i:hover, &>i.active{ color: @theme-color; } /* 焦点 | 选中 */
            }
        }
    }

    /* 歌曲列表 */
    &>.an-list{
        width: 365px; height: 0px; position: relative; overflow: hidden; .transition(0.5s);

        /* 同级 */
        &.active{ height: 350px; }

        .list-block{
            width: 100%; left: -365px; overflow: hidden; position: absolute; .transition(0.5s); opacity: 0;

            &.active{ left: 0; opacity: 1; }

            .block-title{ width: 100%; height: 40px; line-height: 40px; left: 0; padding: 0 10px; .transition(0.4s); position: relative; border-bottom: solid #eee 1px; font-size: 18px; cursor: pointer; }
            .block-title i{ margin-right: 10px; font-size: 1.2em; font-weight: bold; display: inline-block; .transition(0.6s); }
            .block-title span{  }

            .block-content{ width: 100%; height: 310px; overflow: hidden; position: relative; }
            .block-content:hover ul{ width: 351px; }
            .block-content:hover li i{ opacity: 1; }
            /*.block-content:hover .scroll-bar{ opacity: 1; }*/
            ul{ width: 105%; top: 0; margin-right: 2px; position: relative; .transition(0.8s, ease, all, 0.2s); display: inline-block; list-style: none; }
            ul li{ width: 100%; height: 40px; line-height: 40px; .transition(0.5s); border-bottom: solid #eee 1px; background-color: rgba(0, 0, 0, 0.2); font-size: 14px; display: block; cursor: pointer; }
            li:hover{ background-color: rgba(129,195,0,0.7); }
            li,.active{ background-color: @theme-color; }
            li i{ width: 15px; height: 40px; line-height: 40px; margin-right: 5px; float: right; opacity: 0; font-size: 20px; position: relative; .transition(0.6s,ease,all,0.4s); text-align: center; display: inline-block; }
            li .list-taxis{ margin: 0 5px 0 10px; }
            li .status{ font-size: 12px; }
            li .list-name{  }

            .mCSB_draggerContainer{ left: 14px; opacity: 0; .transition(0.6s, ease-out, all); }
            .mCSB_dragger_bar{ width: 9px; background-color: @theme-color; }
            .mCSB_draggerRail{ width: 9px; background-color: rgba(0,0,0,0.1); }
            .block-content:hover .mCSB_draggerContainer{ opacity: 1; left: 0; }
        }
         
        /* 专辑列表 */
        .list-ablum{
            left: -365px;
        }

        /* 歌曲列表 */
        .list-music{
            left: 390px;
        }
    }

    /* 侧边按钮 */
    &>.an-side{
        text-align: center; text-shadow: none; cursor: pointer;
        width: 25px; height: 68px; top: 15px; right: -25px; line-height: 68px; position: absolute; 
        color: #FFF; border-radius: 0 5px 5px 0; background-color: rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3); background: rgba(102, 85, 51, 0.298039);
        i{ top: 5px; position: relative; font-size: 24px; color: #FFF; .transition(0.7s); }
        &:hover>i{ color: #DC143C; }
        & i.active{ .transform(180deg); color: #DC143C; }
    }

    .flat{ 
        position: absolute; top: 40px; left: 210px; color: #FFF; font-size: 23px; opacity: 0; 
        &.active{
            opacity: 1;
            // .animation(rotate 18s linear infinite);
            i{
                top: 0; left: 0; position: absolute;
                opacity: 0;
                .animation(flat 4s cubic-bezier(.09,.64,.16,.94) infinite);
            }
            i:nth-of-type(1){
                .delay-animation(0);
                .transforms(rotate(35deg) translateX(-5px));
            }
            i:nth-of-type(2){
                .delay-animation(.8s);
                .transforms(rotate(-5deg) translateX(-15px));
            }
            i:nth-of-type(3){
                .delay-animation(1.6s);
                .transforms(rotate(45deg) translateX(5px));
            }
            i:nth-of-type(4){
                .delay-animation(2.8s);
                .transforms(rotate(-25deg) translateX(-8px));
            }
            i:nth-of-type(5){
                .delay-animation(3.2s);
                .transforms(rotate(-35deg));
            }
            i:nth-of-type(6){
                .delay-animation(4.5s);
                .transforms(rotate(15deg) translateX(-5px));
            }
        }
    }
}

/* LRC 歌词面板 */
.HMusic-lrc{
    height: 50px; line-height: 50px; width: 100%; bottom: -50px; left: 0; overflow: hidden; text-align: center; background-color: rgba(0, 0, 0, 0.2); margin: 0; padding: 0; display: block; position: fixed;
    .transition( 0.5s );
    &.active{ bottom: 0; }
    &:hover{ height: 100px; }

    ul{ list-style: none; margin: 0; padding: 0; position: relative; .transition( 0.5s ); }
    li{ height: 50px; }
    .base{ font-size: 1.3em; font-weight: bold; text-shadow: 1px 1px 1px #CCC,2px 2px 2px #CCC,3px 3px 3px #444; .transition(0.4s); }
    .current{ color: #008594; font-size: 1.5em; }
}

/* Tips */
.HMusicTips{
    left: 0; top: 10px; padding: 15px; font-size: 18px; position: fixed; z-index: 9999; 
    border-radius: 0 5px 5px 0; background-color: rgba(0, 0, 0, 0.3); color: #FFF; text-shadow: none;
    .transitions( 0.5s ); .transforms( translate3d(-100%, 0, 0) );
    &.active{ .transforms( translate3d(0, 0, 0) ); }
}


/* Public - 全局 */
@background-color:rgba(102, 85, 51, 0.6);/* 背景色 */
@theme-color:#81c300; /* 主题色 */
@color-red:#DC143C;


/* CSSS 动画 */
.delay-animation(@count:.5s){
    -webkit-animation-delay: @count;
    -moz-animation-delay: @count;
    -ms-animation-delay: @count;
    animation-delay: @count;
}
.animation(@cont){
    -webkit-animation: @cont;
    -moz-animation: @cont;
    -ms-animation: @cont;
    animation: @cont;
}

/* 缓动 */
.transition(@seconds:0.3s, @animation:ease, @type:all, @timeout:0s){
    transition:@arguments;
    -o-transition:@arguments;
    -ms-transition:@arguments;
    -moz-transition:@arguments;
    -webkit-transition:@arguments;
}

.transitions(@count){
    transition:@count;
    -o-transition:@count;
    -ms-transition:@count;
    -moz-transition:@count;
    -webkit-transition:@count;
}

/* 旋转 */
.transform(@deg:180deg){
    transform:rotate(@deg);
    -o-transform:rotate(@deg);      /* Opera */
    -ms-transform:rotate(@deg);     /* IE 9 */
    -moz-transform:rotate(@deg);    /* Firefox */
    -webkit-transform:rotate(@deg); /* Safari 和 Chrome */
}
.transforms(@cont){
    -webkit-transform: @cont;
    -moz-transform: @cont;
    -ms-transform: @cont;
    transform: @cont;
}

/* 图标加载loading */
.spinner{ width: 60px; height: 60px; position: relative; margin: 100px auto; }
.double-bounce1, .double-bounce2 
{
    width: 100%; height: 100%; border-radius: 50%;
    background-color: #67CF22; opacity: 0.6;
    position: absolute; top: 0; left: 0;

    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2{ -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

/* 加载图标动画 */
@-webkit-keyframes bounce{ 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } }
@keyframes bounce{ 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }

/* 旋转动画 */
@-webkit-keyframes rotate{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} }
@-moz-keyframes rotate{ from{-moz-transform:rotate(0deg)} to{-moz-transform:rotate(360deg)} }
@-ms-keyframes rotate{ from{-ms-transform:rotate(0deg)} to{-ms-transform:rotate(360deg)} }
@-o-keyframes rotate{ from{-o-transform:rotate(0deg)} to{-o-transform:rotate(360deg)} }

/* 音符 */
@-webkit-keyframes flat{ from{ opacity: 1; } to{top: -48px; left: 78px; opacity: 0; font-size: .6em;} }
@-moz-keyframes flat{ from{opacity: 1;} to{top: -48px; left: 78px; opacity: 0; font-size: .6em;} }
@-ms-keyframes flat{ from{ opacity: 1; } to{ top: -48px; left: 78px; opacity: 0; font-size: .6em; } }
@keyframes flat{ from{opacity: 1;} to{top: -48px; left: 78px; opacity: 0; font-size: .6em;} }

.animation-roate{
    animation: 9.5s linear 0s normal none infinite rotate;
    -webkit-animation:9.5s linear 0s normal none infinite rotate;
}